<template>
	<view class="mask mask-show">
		<view class="cu-dialog" :style="'margin:'+screenWidth/8+'px;'+'width:'+screenWidth+'px'">
			<view class="icon-item position-absolute right-2">
				<uni-icons type="close" size="25" @click="closeModalDialog" />
			</view>
			<view class="flex flex-column flex-1 align-center">
				<view class="flex align-center mt-2">
					<text class="font-32 text-black font-weight-600">是否接受此次匹配服务？</text>
				</view>
				<image :src="targetUser.avatar" class="smaller-circle"></image>
				<view class="flex align-center mt-2">
					<text class="font text-black font-weight-bold">{{targetUser.user_nicename}}</text>
				</view>
				
				<text class="font-sm text-danger mt-1">{{targetUser.area_address}}·{{targetUser.area_address1}}</text>
				<view class="flex align-center w-80 mx-4 mt-2">
					<view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in iconlist" :key="index">
						<image class="slot-image" :src="item.imgpath" style="width: 72rpx;height: 72rpx;"></image>
						<text class="font-28 font-weight-600 mt-2">{{item.name}}</text>
						<text class="font-sm text-gray-normal">{{item.message}}</text>
					</view>
				</view>
				<view class="flex align-center w-80 mx-4">
					<view class="flex-1 flex flex-column align-center justify-center mt-0480">
						<image class="slot-image" src="@/static/icons/iconyuyinzixun.png" style="width: 72rpx;height: 72rpx;"></image>
					</view>
					<view class="flex-1 flex"></view><view class="flex-1 flex"></view>
				</view>
				<view class="flex flex-wrap">
				<button type="primary" class="callpair-button" @click="receiverCallPushing()">接受 (20s)</button>
				<button type="primary" class="callcanel-button" @click="canelCallPushing()">拒&nbsp;绝</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否显示
			value: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			receiverUser: Object,
			currentUser: Object,
			screenWidth: {
				type: Number,
				default: 1080
			},
		},
		data() {
			return {
				modalName: 'normal',
				radio: 'radio1',
				tabIndex: 0,
				iconlist: [{
					name: "视频通话",
					message: "咨询方式",
					imgpath:require("@/static/icons/iconshipinzixun.png")
				}, {
					name: "5元/分钟",
					message: "咨询价格",
					imgpath:require("@/static/icons/iconzixunjiage.png")
				}, {
					name: "经济纠纷",
					message: "咨询领域",
					imgpath:require("@/static/icons/iconzixunlingyu.png")
				}],
				modalShow:false
			};
		},
		created() {
			
		},
		computed: {
			
		},
		methods: {
			closeModalDialog() {
				this.checkAuth(()=>{
					// 通知父组件
					this.$emit('closeModal');
				})
			},
			sendCallPushing() {
				let data = {
					userid: this.currentUser['id'],
					targetid: this.targetUser['id'],
				};
				console.log(data)
				this.$H.post('/user/public/sendcallpushing', data).then(res => {
					if (res.code == 101) {
						let roomId = 10000 + parseInt(this.currentUser['id']);
						console.log(roomId + ',trtcuuid:' + this.currentUser['trtcuuid']);
						uni.navigateTo({
							url: "../chat/chat?roomId=" + roomId + '&trtcuuid=' + this.currentUser['trtcuuid']
						})
					} else {
						console.log(res.info);
					}
				})
			},
		}
	}
</script>

<style>
	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.mask.mask-show {
		background: rgba(0, 0, 0, 0.6);
	}

	.smaller-circle {
		margin: 32upx 32upx 0;
		border-radius: 80upx;
		width: 160upx;
		height: 160upx;
	}

	.callpair-button {
		padding: 16rpx 36rpx;
		margin: 36rpx;
		background-color: #A868FF !important;
		font-size: 32rpx;
		line-height: 1.8;
		border-radius: 48rpx;
	}
	
	.callcanel-button {
		padding: 16rpx 72rpx;
		margin: 36rpx;
		background-color: #E5E5E5;
		color: #A6A6A6;
		font-size: 32rpx;
		line-height: 1.8;
		border-radius: 48rpx;
	}
</style>
